/** */

<template>
  <div>
    <div>
      <button @click="goPrevious">&lt;</button>
      <button @click="goNext">&gt;</button>
      <button @click="showAllValues">all values</button>
      <button @click="doUpdate">update</button>
      <button @click="doUpdate2">update 2</button>
      <button @click="doUpdate3">update 3</button>
    </div>
    <div>
      <button @click="goLeft">&lt;</button>
      <button @click="goRight">&gt;</button>
      <button @click="doUpdateDs1">update ds1</button>
      <button @click="doUpdateDs1_2">update ds1 2</button>
      <button @click="doClear">clear</button>
    </div>
    <div :style="{ height: '10px' }" />
    <!-- <FCForm :dataset="ds1" :fields="fields_1" /> -->
    <div :style="{ height: '10px' }" />
    <div>values: {{ form.getFieldsValue() }}</div>
    <a-form :form="form" :label-col="{ span: 2 }" :wrapper-col="{ span: 4 }">
      <a-form-item label="label of a">
        <a-input
          v-decorator="['a']"
          @change="(e) => handleControlValueChange('a', e.target.value)"
        />
      </a-form-item>
      <a-form-item label="label of b">
        <a-input
          v-decorator="['b']"
          @change="(e) => handleControlValueChange('b', e.target.value)"
        />
      </a-form-item>
    </a-form>
    <!-- <div :style="{ height: '10px' }" /> -->
    <hr />
    <Form2 :dataset="ds1" :fields="fields_1" />
    <hr />
    <button @click="doChangeAValue">change a value</button>
    <button @click="doLogAValue">log a value</button>
    <VModelTest v-model="aValue" />
    <div :style="{ height: '10px' }" />
    <hr />
    <InputTest1 v-model="bValue" />
    b value: {{ bValue }}
    <hr />
    <InputTest2 v-model="bValue" />
    b value: {{ bValue }}
    <!-- <InputTest2 /> -->
    <hr />
    <div>values: {{ form.getFieldsValue() }}</div>
    <a-form :form="form">
      <a-form-item label="a input">
        <a-input
          v-decorator="['a']"
          @change="(e) => handleOneInputChange('a', e.target.value)"
        />
      </a-form-item>
      <a-form-item label="my input 11">
        <input-test-1 v-decorator="['b']" />
      </a-form-item>
      <a-form-item label="my input2">
        <InputTest2
          v-decorator="['b']"
          @change="(e) => handleOneInputChange('b', e.target.value)"
        />
      </a-form-item>
    </a-form>
    <hr />
    <InputTest2 v-model="bValue" />
    <hr />
    <div>current index: {{ ds1.currentIndex }}</div>
    <div>current key: {{ ds1.currentKey }}</div>
    <pre>
ds:{{
        JSON.stringify(
          ds1.getValues({ withKey: true, withStatus: true }),
          null,
          2
        )
      }}
    </pre>
    <!-- <pre>ds1: {{ JSON.stringify(ds1.getFullValues(), null, 2) }}</pre> -->
  </div>
</template>

<script>
// import Vue from 'vue'
// import { Form } from 'ant-design-vue'
import FCForm from '@/vendors/fc-ui/src/form/FCForm.vue'
import FCDataset from '@/vendors/fc-dataset/FCDataset'
import Form2 from './Form2'
import VModelTest from './VModelTest'
import InputTest1 from './InputTest1'
import InputTest2 from './InputTest2'

// Vue.prototype.$form = Form

export default {
  name: 'formTest',
  components: {
    FCForm,
    Form2,
    VModelTest,
    InputTest1,
    InputTest2,
  },
  props: {},
  data() {
    const ds1 = new FCDataset({
      fields: [
        { name: 'a', type: 'string' },
        { name: 'b', type: 'string' },
        // { name: 'd', type: 'string' },
        // { name: 'date1', type: 'date' },
      ],
      datas: [
        { a: 111111, b: 2, c: 3, d: 'this is a test 1', date1: new Date() },
        { a: 222222, b: 12, c: 13, d: 'this is a test 2', date1: new Date() },
        // { a: 21, b: 22, c: 23, d: 'this is a test 3', date1: new Date() },
        { a: 333333, b: 22, c: 23, d: 'this is a test 3', date1: new Date() },
      ],
    })

    const fields_1 = [
      {
        name: 'a',
        title: 'this is a',
        controlType: 'input',
        controlProps: {
          placeholder: 'please input.....',
        },
      },
      {
        name: 'b',
        title: 'bbb',
        controlType: 'input',
        controlProps: {
          // placeholder: 'aaaa',
        },
      },
    ]

    // const values = { a: 1 }
    // const form_1 = Form.createForm(this, values)
    // const form_1 = this.$form.createForm(this, {})
    // form_1.setFieldsValue(ds1.getFieldsValue())

    // console.log('this.form:', form_1)

    // form_1.setFieldsValue({ a: 'sss' })

    // const onValuesChange2 = (props, changedValue, allValue) => {
    // console.log('>> this is:', this)
    // form.setFieldsValue({ d: '>>' })
    // props.form.setFieldsValue({ d: '>>>>>' })
    // console.log('form is:', form)
    // }

    const dsToken = ds1.subscribe({
      onChange: this.onMyDatasetChange,
    })

    // console.log('token is:', dsToken)

    // function onValuesChange() {
    //   console.log('>> this is:', this)
    // }

    const aValue = 'a value'

    return {
      ds1,
      fields_1,
      form: this.$form.createForm(this, {
        onValuesChange: this.handleValuesChange,
      }),
      token: dsToken,
      editing: false,
      aValue,
      bValue: 'bv',
    }
  },
  mounted() {
    // console.log('>>>> mounted')
    this.form.setFieldsValue(this.ds1.getFieldsValue())
  },
  updated() {
    // console.log('>>>>>> updated')
  },
  methods: {
    goPrevious() {
      // console.log('<<<<<<<')
      this.ds1.goPrevious()
    },
    goNext() {
      // console.log('>>>>>>')
      this.ds1.goNext()
    },
    showAllValues() {
      // console.log('now show all values...')
      // console.
    },
    doUpdate() {
      this.ds1.setFieldsValue({
        a: `new value:${new Date()}`,
      })
    },
    doUpdate2() {
      this.ds1.setFieldsValue({
        key: 'key-2',
        data: { a: `update 2 - ${new Date()}` },
      })
    },
    doUpdate3() {
      this.ds1.setFieldsValue({
        key: 'key-1',
        data: { a: `update 3 - ${new Date()}` },
      })
    },
    goLeft() {
      this.ds1.goPrevious()
    },
    goRight() {
      this.ds1.goNext()
    },
    onMyDatasetChange() {
      console.log('[func] - onMyDatasetChange')

      let values = this.ds1.getFieldsValue()
      this.form.setFieldsValue(values)
    },
    handleValuesChange(props, changedValues, allValues) {
      console.log('[f] form-test.handleValuesChange')
    },
    handleInputChange(name, value) {
      console.log('name is:', name, 'value is:', value)
    },
    handleControlValueChange(name, value) {
      // const value = e.target.value
      this.ds1.setFieldsValue({ [name]: value })
    },
    doUpdateDs1() {
      this.ds1.setFieldsValue({ a: 'doUpdateDs1.a' })
    },
    doUpdateDs1_2() {
      this.ds1.setFieldsValue({ a: 'sdfdsfdsfdsfds' }, { key: 'key-2' })
    },
    doClear() {
      this.ds1.clear()
    },
    doLogAValue() {
      console.log('value is:', this.aValue)
    },
    doChangeAValue() {
      console.log('>>>>')
      this.aValue = 'update by button'
    },
    handleOneInputChange(name, value) {
      console.log('now handle one input change:', name, value)
    },
  },
}
</script>

<style></style>
